import React, { Component, Fragment } from 'react'
import Styles from './news.less'
import { api } from 'common/js/ajax'
import Tabs from 'containers/tabs'
import { home } from 'constants/home'
import NewsSection from 'containers/newsSection'
import Pagination from 'components/pagination'
import Loading from 'components/loading'
import pointer from 'components/pointer'
import { BannerDetail } from 'containers/banner'
const { newsType } = home.news
const withAuthorAndTimeNewsSection = (WrappedComponent) => class Hoc extends Component{
  render() {
    let {date, ...otherProps} = this.props
    let {author, ...lastProps} = otherProps
    return (
      <WrappedComponent {...lastProps} footer={<div className={Styles.msgFooter}>
                                                  <span className={Styles.date}>{new Date(date - 0).format('yyyy-MM-dd')}</span>
                                                  <span className={Styles.author}>发布者:{author}</span>
                                                </div>}/>
    )
  }
}

const WithAuthorNewsSection = withAuthorAndTimeNewsSection(NewsSection)
class NewsMain extends Component {
  constructor(props) {
    super()
    this.pageSize = 5;
    this.type = props.type
    this.state = {
      news: [],
      pageNo: 1,
      count: null,
      loading: false,
      scrollTop: 0
    }
    this.html = document.documentElement
    this.handleChange = this.handleChange.bind(this)
  }
  componentDidCatch(err) {
  }
  componentWillReceiveProps(nextProps) {
    let { pageNo, scrollTop } = nextProps
    if (pageNo !== null && pageNo !== this.props.pageNo) {
      this._getNews(this.type, pageNo)
      this.setState({
        pageNo
      })
    } 
    if (scrollTop !== null && scrollTop !== this.props.scrollTop) {
      this.setState({
        scrollTop
      })
    }
  }
  componentDidUpdate(prevProps, prevState) {
    const { scrollTop } = this.state
    if (prevState.scrollTop !== scrollTop && this.ajaxFlag) {
      window.scrollTo(0, scrollTop)
    }
  }
  componentDidMount() {
    this._getNews(this.type, 1)
  }
  async _getNews(type, pagenum) {
    this.setState({
      loading: true
    })
    const { pageSize } = this
    let pageNo = pagenum ? pagenum : this.state.pageNo
    let data = await api.get('/api/getNewsByType', {
      pageNo,
      pageSize,
      type
    })
    this.ajaxFlag = true
    if (this.state.scrollTop > 0) {
      window.scrollTo(0, this.state.scrollTop)
    }
    data = pointer(data).data({})
    let news = pointer(data).data([])
    let count = data.count
    this.setState({
      count,
      news,
      loading: false,
    })
  }
  handleChange(pageNo) {
    this.setState({
      pageNo
    })
    // this.html.scrollTop = this.tabsTop
    document.querySelector(`.${Styles.newsMainContainer}`).scrollIntoView()
  }
  render() {
    const { news, count, pageNo } = this.state
    const { pageSize } = this
    return (
      <Fragment>
        {
          <Loading loading={this.state.loading}>
            <div className={Styles.newsMain}>
              {news.map(entity => (
                <WithAuthorNewsSection title={entity.title} pageNo={pageNo} abstract={entity.abstract} key={entity.id} date={entity.date} author={entity.author} id={entity.id} type={entity.type}/>
              ))}
            </div>
            <Pagination count={count} pageNo={pageNo} pageSize={pageSize} onChange={this.handleChange}/>
          </Loading>
        }
      </Fragment>      
    )
  }
}
class NewsContainer extends Component {
  constructor() {
    super()
    this.state = {
      tabIndex: 0,
      pageNo: null,
      scrollTop: null
    }
  }
  componentDidMount() {
    let listInfo = sessionStorage.getItem('listInfo')
    if (listInfo) {
      listInfo = JSON.parse(sessionStorage.getItem('listInfo'))
      const { pageNo, tabIndex, scrollTop } = listInfo     
      if (pageNo !== this.state.pageNo) {
        this.setState({
          pageNo
        })
      }
      if (tabIndex !== this.state.tabIndex) {
        this.setState({
          tabIndex
        })
      }
      if (scrollTop !== this.state.scrollTop) {
        this.setState({
          scrollTop
        })
      }
      window.scrollTo(0, listInfo.scrollTop)
      sessionStorage.removeItem('listInfo')
    }
  }
  render() {
    const TabPane = Tabs.TabPane
    const { tabIndex, pageNo, scrollTop } = this.state
    return (
        <div className={Styles.newsContainer}>
          {
            <div className={Styles.newsMainContainer}>
              <Tabs currentIndex={tabIndex}>
                  {newsType.map((item, index) => (
                      <TabPane tab={item.name} key={item.id}>
                          <NewsMain type={index+1} pageNo={tabIndex === index ? pageNo : null} scrollTop={tabIndex === index ? scrollTop : null}/>
                      </TabPane>
                  ))}
              </Tabs>
            </div>
          }
        </div>
    )
  }
}
export default class News extends Component {
  // componentWillUnmount() {
  //   console.log('跳转了')
  // }
  render() {
    return (
      <Fragment>
        <BannerDetail backgroundPic="/static/image/newsBanner.png"/>
        <NewsContainer/>
      </Fragment>
    )      
  }
}